<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
  <link rel="stylesheet" href="./css.css">
</head>
<body>
  <button onclick="printpage()">导出</button>
  <div id="container">
    <p>这是一个段落</p>
    <h1>这是一个标题</h1>
    <div id="echart1"></div>
    <img id="echart1img">
  <table>
      <th><td>标题1</td><td>标题2</td></th>
      <tr><td>内容2</td><td>内容2</td></tr>
  </table>
  <div id="echart2"></div>
  <img id="echart2img">
</div>
<script>
$(function(){
  var chartDom1 = document.getElementById('echart1');
var myChart1 = echarts.init(chartDom1);
var option1 = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};
 myChart1.setOption(option1);
var chartDom2 = document.getElementById('echart2');
var myChart2 = echarts.init(chartDom2);
    var option2 = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    };
    myChart2.setOption(option2);
})
  const printpage = () => {
      let header =
        "<html xmlns:o='urn:schemas-microsoft-com:office:office' " +
        "xmlns:w='urn:schemas-microsoft-com:office:word' " +
        "xmlns='http://www.w3.org/TR/REC-html40'>" +
        "<head><meta charset='utf-8'><title>Export HTML to Word Document with JavaScript</title></head><body>" +
        // "<link rel='stylesheet' href='./css.css'>" ;
        "<style type='text/css'>div{text-align: center;};table{width:100%};th {background: red;color: blue;} th,tr,td{border:1px solid;text-align: center;};</style>";
       let echart1 = echarts.init(document.getElementById('echart1'))
       $("#echart1img").attr("src",echart1.getDataURL({ // mychart1的option
        type:'png',
        pixelRatio: 2,
        backgroundColor: '#fff'
      }))
       let echart2 = echarts.init(document.getElementById('echart2'))
       $("#echart2img").attr("src",echart1.getDataURL({ // mychart1的option
        type:'png',
        pixelRatio: 2,
        backgroundColor: '#fff'
      }))
      $("#echart2img").css('display','block')
      $("#echart1img").css('display','block')
      let footer = "</body></html>";
      let sourceHTML =
        header + document.getElementById("container").innerHTML + footer;
      let source =
        "data:application/vnd.ms-word;charset=utf-8," +
        encodeURIComponent(sourceHTML);
      let fileDownload = document.createElement("a");
      document.body.appendChild(fileDownload);
      fileDownload.href = source;
      fileDownload.download = "document.doc";
      fileDownload.click();
      document.body.removeChild(fileDownload);

      setTimeout(()=>{
        $("#echart2img").css('display','none')
      $("#echart1img").css('display','none')
      })
} 
</script>
</body> 
</html>
